<template>
  <div class="masker" :style="style" @click="$emit('input', false)">
    <slot/>
  </div>
</template>

<script>

export default {
  name: 'masker',
  props: ['position', 'value', 'zIndex'],
  computed: {
    style () {
      var {position, zIndex = 5, value} = this
      return {
        position,
        zIndex,
        display: value ? 'block' : ''
      }
    }
  }
}
</script>

<style>
  .masker {
    background-color: rgba(0, 0, 0, .35);
    position: absolute;
    display: none;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
  }
</style>
